{include file="layout/layout" /}
<link href="__PUBLIC__/static/css/uploadify.css" />
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.uploadify.js"></script>
<body style="background-color: rgb(255, 255, 255); overflow: auto; cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
            <div class="subject">
                <h3>商品分类管理</h3>
                <h5>网站商品分类添加与管理</h5>
            </div>
        </div>
    </div>
    <div id="explanation" class="explanation">
        <div id="checkZoom" class="title">
            <i class="fa fa-lightbulb-o"></i>
            <h4 title="提示相关设置操作时应注意的要点">操作提示</h4><span title="收起提示" id="explanationZoom"></span>
        </div>
        <ul>
            <li>温馨提示：顶级分类（一级大类）设为推荐时才会在首页楼层中显示</li>
            <li>最多只能分类到三级</li>
        </ul>
    </div>
    <div class="flexigrid">
        <div class="mDiv">
            <div class="ftitle">
                <h3>商品分类列表</h3>
            </div>
        </div>
        <div class="hDiv">
            <div class="hDivBox">
                <table cellspacing="0" cellpadding="0">
                    <thead>
                    <tr class="">
                        <th axis="col1" align="center">
                            <div style="text-align: center; width: 60px;">分类ID</div>
                        </th>
                        <th axis="col2" align="center">
                            <div style="text-align: center; width: 200px;">分类名称</div>
                        </th>
                        <th axis="col3" align="center">
                            <div style="text-align: center; width: 80px;">图片</div>
                        </th>
                        <th axis="col4" align="center">
                            <div style="text-align: center; width: 80px;">是否前台显示</div>
                        </th>
                        <th axis="col4" align="center">
                            <div style="text-align: center; width: 50px;">排序</div>
                        </th>
                        <th axis="col5" align="center">
                            <div style="text-align: center; width: 200px;">备注</div>
                        </th>
                        <th axis="col10" class="handle" align="center">
                            <div style="text-align: center; width: 150px;">操作</div>
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="tDiv">
            <div class="tDiv2">
                <div class="fbutton">
                    <div title="新增分类" class="add">
                        <a href="{:url('shop/add_type')}" style="color:#0ba4da;"><span><i class="fa fa-plus"></i>新增分类</span></a>
                    </div>
                </div>
            </div>
            <div style="clear:both"></div>
        </div>

        <div style="height: auto;" class="bDiv">
            <table id="article_cat_table" class="flex-table autoht" cellspacing="0" cellpadding="0" border="0">
                <tbody id="treet1">
                <!-- 顶级分类 -->
                {foreach $list as $k=>$v}
                <tr data-level="1" parent_id_path="0_{$v.ty_id}" class="parent_id_{$v.ty_id}" nctype="0">
                    <td class="sort">
                        <div style="text-align: center; width: 60px;">{$v.ty_id}</div>
                    </td>
                    <td class="name">
                        <div style="text-align: center; width: 200px;">
                            <input value="{$v.ty_name}" onchange="changeVal({$v.ty_id},'ty_name',this)" style="text-align: left; width:180px;" type="text" />
                        </div>
                    </td>

                    <td class="name">
                        <div style="text-align: center; width: 80px;">
                            <img class="photoname" src="__ROOT__{$v.ty_ico}" style="width:20px" alt="">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                           <span class="btn btn-img" data-id="{$v.ty_id}">更改</span>
                        </div>
                    </td>

                    <td class="" align="center">
                        <div style="text-align: center; width: 80px;">
                            {if $v.ty_status==1}
                            <span class="yes" value=2 onclick="changeStatus({$v.ty_id},'ty_status',this)"><i class="fa fa-check-circle"></i>是</span>
                            {else/}
                            <span class="no" value=1 onclick="changeStatus({$v.ty_id},'ty_status',this)"><i class="fa fa-ban"></i>否</span>
                            {/if}
                        </div>
                    </td>
                    <td class="sort">
                        <div style="text-align: center; width: 50px;">
                            <input onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onpaste="this.value=this.value.replace(/[^\d]/g,'')" onchange="changeVal({$v.ty_id},'ty_sort',this)" size="4" value="{$v.ty_sort}" maxlength="2" type="text" />
                        </div>
                    </td>
                    <td class="name">
                        <div style="text-align: center; width: 200px;">
                            <input value="{$v.ty_desc}" onchange="changeVal({$v.ty_id},'ty_desc',this)" style="text-align: left; width:180px;" type="text" />
                        </div>
                    </td>
                    <td class="handle" align="center">
                        <div style="text-align: center; width: 150px; max-width:250px;">
                            <a class="btn red" href="javascript:;" data-id="{$v.ty_id}" onclick="confirmDel(this)"><i class="fa fa-trash-o"></i>删除</a>
                        </div>
                    </td>
                    <td style="width: 100%;"><div>&nbsp;</div></td>
                </tr>
                {/foreach}
                </tbody>
            </table>
        </div>
        <div class="iDiv" style="display: none;"> </div>
        <br>
        <br>
        <br>
        <br>
    </div>
</div>

<script>
    var SCOPE = {
        'del_url':"{:url('shop/del_type')}"
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        // 表格行点击选中切换
        $('.bDiv > table>tbody >tr').click(function(){
            $(this).toggleClass('trSelected');
        });
    });
    // ajax修改
    function changeVal(id,act,obj){
        var id = id;
        var act = act;
        var value = $(obj).attr('value');
        $.post("{:url('shop/cateAjax')}",{'id':id,'act':act,'val':value},function(res){
            if(res.code==1){
                if(act == 'name' || 'sort'){
                    $(obj).val(value);
                }
                alert('修改成功！');
            }else{
                alert('修改失败！');
            }
        })
    }

    function changeStatus(id,act,obj){
        var value = $(obj).attr('value');
        $.post("{:url('shop/cateAjax')}",{'id':id,'act':act,'val':value},function(res){
            if(res.code==1){
                if($(obj).hasClass('yes')){
                    $(obj).removeClass('yes').addClass('no');
                    $(obj).html("<i class='fa fa-ban'></i>否");
                    $(obj).attr('value',0);
                }else if($(obj).hasClass('no')){
                    $(obj).removeClass('no').addClass('yes');
                    $(obj).html("<i class='fa fa-check-circle'></i>是");
                    $(obj).attr('value',1);
                }
                layer.alert('修改成功');
            }else{
                layer('修改失败');
            }
        })

    }

    // 确认删除
    function confirmDel(obj){
        layer.open({
            content:'删除后将不在存在，请确定是否删除？',
            icon:3,
            btn: ['确定', '取消'],
            yes:function (index) {
                $.ajax({
                    url:SCOPE.del_url,
                    data:{'id':$(obj).attr('data-id')},
                    dataType:'json',
                    type:"post",
                    success:function(res){
                        if(res.code == 1){
                            $(obj).parents('tr').remove();
                            layer.close(index)
                        }else{
                            layer.alert('删除失败');
                        }
                    }
                })
            },
        })
    }

    $('.btn-img').click(function(){
        var id = $(this).attr('data-id');
        layer.open({
            type: 1,
            title:'更换图片',
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '240px'], //宽高
            content: '<form action="upload_type" id="roleform" method="post" enctype="multipart/form-data">'+
                '<input type="hidden" name="id" value="'+id+'">'+
            '<div class="ncap-form-default">'+
            '<dl class="row">'+
            '<dt class="tit">'+
            '<label>图片</label>'+
            '</dt>'+
           ' <dd class="opt">'+
          '  <input type="file" name="file" datatype="*">'+
         '   <span class="red">推荐尺寸为30*30px，不可过大，否则上传失败</span>'+
        '</dd>'+
        '</dl>'+
        '<div class="bot"><button id="button" style="width:96px;height:35px;background: #4FC0E8;border-radius:5px;line-height:35px;text-align: center;color:#fff;border: 0;font-size: 15px;">确认提交</button></div>'+
           '</div>'+
            '</form>'
        });
    })
</script>

</body>
</html>